<template>
  <div class="knowledge-mastery">
    <h3>知识点掌握情况</h3>

    <div v-for="(item, index) in data" :key="index" class="knowledge-item">
      <h4>{{ item.subject }}</h4>
      <table>
        <tr>
          <td>受力分析</td>
          <td>{{ item.analysis }}</td>
        </tr>
        <tr>
          <td>摩擦力</td>
          <td>{{ item.force }}</td>
        </tr>
        <tr v-if="index === 1">
          <td>磁场</td>
          <td>{{ item.field }}</td>
        </tr>
        <tr v-if="index === 1">
          <td>磁生电</td>
          <td>{{ item.electricity }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';



export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    }
  }
});
</script>

<style scoped>
.knowledge-mastery {
  margin-bottom: 30px;
}

.knowledge-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #eee;
}

td {
  padding: 8px 12px;
}

td:first-child {
  width: 40%;
}
</style>
